<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="https://unpkg.com/vue"></script>

    <title>组件</title>

</head>
<body>

<div id="app-1">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>

    <!-- kebab-case in HTML -->
    <child my-message="hello!"></child>

    <div>
        <input v-model="parentMsg">
        <br>
        <child v-bind:my-message="parentMsg"></child>
    </div>

</div>

<div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>

    <test-component v-on:click.native="doTheThing"></test-component>
</div>

<div id="app-2">
    <h1>我是父组件的标题</h1>
    <my-component>
        <p slot="aa">这是一些初始内容</p>
        <p>这是更多的初始内容</p>
    </my-component>
</div>

<div id="app-3">
    <blog-post>
        <h1 slot="header">
            header,About Me
        </h1>
        <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named
            slot.</p>
        <p slot="footer">
            footer,Copyright 2016 Evan You
        </p>
        <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
    </blog-post>
</div>

<div id="todo_simple">

    <input v-model="todo_text"
           @keyup.enter="addNewTodo"
           placeholder="add todo">

    <ul>

        <li
                is="todo-item"
                v-for="(todo,item) in todos"
                :todo="todo"
                :key="todo.id"
                @remove="todos.splice(index, 1)">
        </li>

    </ul>


</div>

<script src="component.js"></script>

</body>
</html>